<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对比菜单</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/css/index.css"></script>
</head>
<body th:fragment="compare">
    <div style="padding: 10px 10px" class="diff-wrapper">
        <!--原文本-->
        <fieldset class="layui-elem-field">
            <legend>原文本</legend>
            <div class="layui-field-box">
                <textarea placeholder="原文本" class="layui-textarea diff-textarea original"  wrap="soft" ></textarea>
            </div>
        </fieldset>
        <!--新文本-->
        <fieldset class="layui-elem-field">
            <legend>新文本</legend>
            <div class="layui-field-box">
                <textarea placeholder="新文本" class="layui-textarea diff-textarea changed" wrap="soft"></textarea>
            </div>
        </fieldset>
        <!--对比结果-->
        <fieldset class="layui-elem-field">
            <legend>对比结果</legend>
            <div class="layui-field-box comparediff">
                <div class="diff" style="background-color: #F2F2F2">

                </div>
            </div>
        </fieldset>
    </div>
    <script>var jQuery = layui.jquery;</script>
    <script src="/static/js/diff_match_patch.js" th:src="@{static/js/diff_match_patch.js}"></script>
    <script src="/static/js/jquery.pretty-text-diff.min.js" th:src="@{static/js/jquery.pretty-text-diff.min.js}"></script>
      <script>
        //文本比较
        jQuery(".diff-textarea").on('change keyup', function() {
            jQuery(".diff-wrapper").prettyTextDiff({
                originalContent: jQuery(".original").val(),
                changedContent: jQuery(".changed").val(),
                diffContainer: ".diff",
                cleanup: true,
                debug: false
            });
        });
    </script>
</body>
</html>